<template>
<div class="bgimg"
  <div>
<el-card @click.native="outerVisible = true" shadow="hover" style="padding:0px;position:absolute;top:40%">
          <img src="../assets/agree.png" alt="">
          <p style="margin:0">好友申请</p>
        </el-card>
  <el-dialog title="好友列表" :visible.sync="outerVisible" :modal-append-to-body='false' append-to-body>
    <div style="overflow-y: scroll;overflow-x: hidden;" class="overflow">
    <div v-for="(friend,index) in friendlist " :key="index" style="align-items:center;display:flex;justify-content:center">
      <img :src="friend.pic" style="width:40px;cursor:pointer;margin:10px" @click="doLook(friend.id)">
      <span style="width:30%;text-align:center;cursor:pointer;" @click="doLook(friend.id)" class="img">{{friend.userName}}</span>
      <el-button @click="doAgree(friend.id)" >同意</el-button>
    </div>
    </div>
    <el-dialog
      title="好友信息"
      width="30%"
      :visible.sync="innerVisible"
      append-to-body
      >
      <div style="align-items:center;display:flex;position:relative;left:10%">
        <p style="">头像:</p>
        <img :src="friend.pic" style="width:40px;margin:20px">
      </div>
      <div style="align-items:center;display:flex;position:relative;left:10%">
        <p style="">姓名:</p>
        <span style="position:relative;left:7%">{{friend.name}}</span>
      </div>
      <div style="align-items:center;display:flex;position:relative;left:10%">
        <p style="">性别:</p>
        <span style="position:relative;left:7%">{{friend.sex}}</span>
      </div>
      <div style="align-items:center;display:flex;position:relative;left:10%">
        <p style="">电话:</p>
        <span style="position:relative;left:7%">{{friend.tel}}</span>
      </div>
      <div style="align-items:center;display:flex;position:relative;left:10%">
        <p style="">个性签名:</p>
        <span style="position:relative;left:7%">{{friend.signature}}</span>
      </div>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
    </div>
  </el-dialog> 
  </div>
  </div>
</template>

<script>
export default {
name:'agree',
  data () {
    return {
      innerVisible:false,
      outerVisible:false,
      myId:'',
      friendlist:[],
      url:'https://newchart.oss-cn-beijing.aliyuncs.com/2020-11-19/pic_1.jpg',
      friend:{
        name:'',
        pic:'',
        signature:'',
        sex:'',
        tel:'',
      },
    }
  },
  mounted(){
    this.myId = localStorage.getItem('fromUserId');
    this.getFriend(this.myId);
  },
  methods: {
      //关闭弹窗
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    //获取好友添加消息
    getFriend(id){
        this.$axios.get('/api/socket/relationship/apply/'+id).then((resp) =>{
          // console.log(resp.relationship.friends)
            this.friendlist=resp.relationship.friends
            console.log(this.friendlist)
        })
    },
    //查看好友详细信息
    doLook(id){
      this.innerVisible = true
      this.$axios.get('api/website/user/info/'+id).then((resp) =>{
        console.log(resp.user)
        this.friend.name = resp.user.userName
        this.friend.tel = resp.user.tel
        this.friend.pic = resp.user.pic
        this.friend.signature = resp.user.signature
        if(resp.user.sex === true){
        this.friend.sex = '男'
        }else{
          this.friend.sex = '女'
        }
      })
    },
    doAgree(id){
      let form ={
        friendId:id,
        id:this.myId
      }
      this.$axios.post('/api/socket/relationship/save',form).then((resp) =>{
            console.log(resp)
            if(resp.code == 200){
                this.$message.success(resp.msg)
                this.outerVisible = false
                this.$router.go(0)
            }
          })
    }
  }
}
</script>


<style scoped>
.img:hover{
  color: blue;
}

.overflow::-webkit-scrollbar{

  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
.overflow::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: rgb(135, 178, 235);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
.overflow::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(247, 244, 244, 0.74);
  background   : #ededed;
  border-radius: 10px;
  }
  .bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		background-size: cover;
		height: 100%;
		width: 100%;
	}
</style>